<template>
	<div class="HistoryWalletDetail">
		<v-header></v-header>
		<div v-if="item" class="detail-title">
			<h3 v-if="isIncome==0">{{priseName }}<font color="#007AFF" v-if="priseRealname !=''">（{{priseRealname }}）</font></h3>
			<h3 v-else-if="isIncome==1">{{receiverName }}<font color="#007AFF" v-if="receiverRealname !=''">（{{receiverRealname }}）</font></h3>
			<h2 v-if="isIncome==0"><font color="#FF4949">+{{priseAmount}}</font></h2>
			<h2 v-else-if="isIncome==1"><font color="#333333">-{{priseAmount}}</font></h2>
			<p>[{{receiveType}}]</p>
		</div>
		<div v-if="item" class="detail-content">
			<ul class="table-box">
				<li>
					<p>支付金额</p>
					<span>{{priseAmount }}</span>
				</li>
				<li v-if="serviceCharge">
					<p>服务费</p>
					<span>{{serviceCharge }}</span>
				</li>
				<li>
					<p>支付状态</p>
					<span v-if="receiveStatus==0"><font color="#00CC66">已支付</font></span>
					<span v-else-if="receiveStatus==1"><font color="#FF4949">未支付</font></span>
				</li>
				<li>
					<p>收支</p>
					<span v-if="isIncome==0">收入</span>
					<span v-else-if="isIncome==1">支出</span>
				</li>
				<li>
					<p>支付人</p>
					<span>{{priseName }}<br/><font color="#007AFF" v-if="priseRealname !=''">（{{priseRealname }}）</font></span>
				</li>
				<li>
					<p>收款人</p>
					<span>{{receiverName }}<br/><font color="#007AFF" v-if="receiverRealname !=''">（{{receiverRealname }}）</font></span>
				</li>
				<li style="border-bottom: 1px solid #FFFFFF;">
					<p>交易方式</p>
					<span>{{receiveType}}</span>
				</li>
			</ul>
		</div>
		<div v-if="item" class="detail-content">
			<ul class="table-box">
				<li>
					<p>订单号</p>
					<span>{{orderNum}}</span>
				</li>
				<li style="border-bottom: 1px solid #FFFFFF;">
					<p>支付时间</p>
					<span>{{receiveTime}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>
<style>
	.HistoryWalletDetail {
		margin-top: 4rem;
	}
	.HistoryWalletDetail .detail-title{width: 100%; margin: 0 auto 1rem; padding: 1rem 0; background: #fff; box-sizing: border-box; text-align:center;}
	.HistoryWalletDetail .detail-title h3{font-size: 1.4rem;color: #999999;}
	.HistoryWalletDetail .detail-title h2{margin: 1.4rem 0;font-size: 2.0rem;font-weight: 700;}
	.HistoryWalletDetail .detail-title p{font-size: 1.4rem;color: #333;}
	.HistoryWalletDetail .detail-content {
		color: #333;
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		margin-top: 1rem;
	}
	.HistoryWalletDetail .table-box{
		padding: 1rem;
	}
	.HistoryWalletDetail .table-box li {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #eee;
		display: flex;
		padding: 1rem 0;
	}
	
	.HistoryWalletDetail .table-box li h2 {
		font-size: 1.4rem;
	}
	
	.HistoryWalletDetail .table-box li p {
		font-size: 1.2rem;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
	}
	.HistoryWalletDetail .table-box li span {
		text-align: right;
		color: #999999;
		font-size: 1.2rem;
		-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;
	}
	
	.HistoryWalletDetail .table-box li h3 {
		font-weight: 700;
		margin-bottom: 1.5rem;
	}
</style>
<script>
	import router from './../../router';
	import util from './../../js/util/util.js';
	import vHeader from './../common/Header.vue';
	import {Toast} from 'mint-ui';
	export default {
		data() {
			return {
				item: '',
				type:'',
				isIncome:this.$store.state.isIncome,
				priseName:this.$store.state.priseName,
				priseRealname:this.$store.state.priseRealname,
				priseAmount:this.$store.state.priseAmount,
				receiveType:this.$store.state.receiveType,
				receiveStatus:this.$store.state.receiveStatus,
				orderNum:this.$store.state.orderNum,
				receiverName:this.$store.state.receiverName,
				receiverRealname:this.$store.state.receiverRealname,
				receiveTime:this.$store.state.receiveTime,
				serviceCharge:this.$store.state.serviceCharge
			};
		},
		components: { // 声明子组件
			Toast,
			vHeader
		},
		methods: {
			
		},
		created() {
			this.$store.state.headings = this.$router.history.current.name; //修改标题
			this.$store.state.isFooterShow = false; //显示底部导航
		},
		mounted: function() {
			this.item = this.$route.query.item;
			this.type = this.$route.query.type;

//			//放入缓存中
			if(!util.isEmpty(this.$route.query.item.isIncome)){
				this.isIncome = this.item.isIncome;
				this.orderNum = this.item.orderNum;
				this.receiverName = this.item.receiverName;
				this.receiverRealname = this.item.receiverRealname;
				if(this.type == 1){
					this.priseName = this.item.payerName;
					this.priseRealname = this.item.payerRealname;
					this.priseAmount = this.item.payAmount;
					this.receiveType = this.item.payType;
					this.receiveStatus = this.item.payStatus;
					this.receiveTime = this.item.payTime;
				}
				if(this.type == 2){
					this.priseName = this.item.payerName;
					this.priseRealname = this.item.payerRealname;
					this.priseAmount = this.item.payAmount;
					this.receiveType = this.item.payType;
					this.receiveStatus = this.item.payStatus;
					this.receiveTime = this.item.payTime;
				}
				if(this.type == 3){
					this.priseName = this.item.priseName;
					this.priseRealname = this.item.priseRealname;
					this.priseAmount = this.item.increaseAmount;
					this.receiveType = this.item.receiveType;
					this.receiveStatus = this.item.receiveStatus;
					this.receiveTime = this.item.receiveTime;
					this.serviceCharge = this.item.serviceCharge;
				}
				if(this.type == 4){
					this.priseName = this.item.priseName;
					this.priseRealname = this.item.priseRealname;
					this.priseAmount = this.item.priseAmount;
					this.receiveType = this.item.receiveType;
					this.receiveStatus = this.item.receiveStatus;
					this.receiveTime = this.item.receiveTime;
				}
				localStorage.setItem("isIncome",this.isIncome);
				localStorage.setItem("priseName",this.priseName);
				localStorage.setItem("priseRealname",this.priseRealname);
				localStorage.setItem("priseAmount",this.priseAmount);
				localStorage.setItem("receiveType",this.receiveType);
				localStorage.setItem("receiveStatus",this.receiveStatus);
				localStorage.setItem("receiveTime",this.receiveTime);
				localStorage.setItem("orderNum",this.orderNum);
				localStorage.setItem("receiverName",this.receiverName);
				localStorage.setItem("receiverRealname",this.receiverRealname);
				localStorage.setItem("serviceCharge",this.serviceCharge);
				
			}else{
				this.isIncome =  localStorage.getItem("isIncome");
				this.priseName =  localStorage.getItem("priseName");
				this.priseRealname =  localStorage.getItem("priseRealname");
				this.priseAmount =  localStorage.getItem("priseAmount");
				this.receiveType =  localStorage.getItem("receiveType");
				this.receiveStatus =  localStorage.getItem("receiveStatus");
				this.orderNum =  localStorage.getItem("orderNum");
				this.receiverName =  localStorage.getItem("receiverName");
				this.receiverRealname =  localStorage.getItem("receiverRealname");
				this.receiveTime =  localStorage.getItem("receiveTime");
				this.serviceCharge =  localStorage.getItem("serviceCharge");
			}
		}
	}
</script>